<template>
  <div class="content">
    <div class="content-box">
      <h3>预收费用</h3>
      <div style="text-align: right;padding-right: 10px;padding-bottom: 5px">
        <a-button @click="visibleBtn" style="color: #1D79FA" type="link">
          缴费记录
        </a-button>
      </div>
      <div class="content-bottom">
        <div class="bottom-words">
          <p class="bottom-left">账户余额（元）：</p>
          <p class="bottom-right">¥{{ price }}</p>
          <p v-show="price=='0'" style="margin: 0;margin-left: 10px;color: #FF5656;font-weight: 400;font-size: 15px;">
            <img src="../../../assets/img/police.png">
            余额不足
          </p>
        </div>
        <div style="margin-bottom: 15px">
          <p class="bottom-left" style="margin-bottom: 10px">充值金额</p>
          <a-input v-model="cost" type="number" style="border: none;"/>
          <span style="width: 100%;height: 1px;background: #E2E3E3;display: block;">
          </span>
        </div>
        <div>
          <p class="bottom-left" style="margin-bottom: 15px">其他充值金额</p>
          <div>
            <a-radio-group v-model="value" @change="onChange">
              <a-radio-button value="100">
                100元
              </a-radio-button>
              <a-radio-button value="200">
                200元
              </a-radio-button>
              <a-radio-button value="300">
                300元
              </a-radio-button>
              <a-radio-button value="500">
                500元
              </a-radio-button>
              <a-radio-button value="1000">
                1000元
              </a-radio-button>
            </a-radio-group>
          </div>
        </div>
        <div style="text-align: center;margin: 15px">
          <img src="../../../assets/code.png">
          <p style="font-size: 15px;font-family: Microsoft YaHei;font-weight: 400;color: #666666;">扫码充值</p>
        </div>
        <span style="width: 100%;height: 1px;background: #E2E3E3;display: block;"></span>
        <div style="display:flex;margin: 15px 0;align-items: center">
          <p style="margin: 0;margin-right: 10px">充值确认</p>
          <a-button
            @click="determine"
            style="margin-right: 10px;width: 80px;border: none;background: linear-gradient(90deg, #28A1FF, #00C6F0);height: 40px;"
            type="primary">
            是
          </a-button>
          <a-button style="width: 80px;height: 40px;border: 1px solid #21A8FC;border-radius: 4px;color: #26A3FE;">
            否
          </a-button>
        </div>
      </div>
    </div>
    <paymentRecord ref="paymentRecord"></paymentRecord>
  </div>
</template>

<script>
import {queryBalanceInfo, recharge} from '@/api/device'
import paymentRecord from './paymentRecord'

export default {
  data() {
    return {
      value: '',
      price: '',
      cost: ''
    }
  },
  components: {
    paymentRecord
  },
  mounted() {
    this.dataList()
  },
  methods: {
    visibleBtn() {
      this.$refs.paymentRecord.visible = true
      this.$refs.paymentRecord.dataList()
    },
    onChange(e) {
      this.cost = e.target.value
    },
    dataList() {
      queryBalanceInfo().then(res => {
        console.log(res)
        this.price = res.result.priceTotal
      }).catch(err => {

      })
    },
    determine() {
      recharge(this.cost).then(res => {
        this.$message.success('充值成功');
        this.cost = ''
        this.value = ''
        this.dataList()
      }).catch(err => {

      })
    }
  }
}
</script>

<style scoped>
.content {
  width: 100%;
  background: linear-gradient(0deg, #E2E8F2, #C6E4FB);
  box-shadow: 0px 0px 10px 0px rgba(53, 94, 225, 0.04);
  border-radius: 4px;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-box {
  width: 599px;
  text-align: center;
}

.content-box h3 {
  font-size: 38px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #299FAD;
}

.content-bottom {
  text-align: left;
  width: 575px;
  height: 500px;
  background: #FFFFFF;
  box-shadow: 0px 3px 27px 0px rgba(113, 147, 205, 0.16);
  border-radius: 10px;
  padding: 30px 60px;
  box-sizing: border-box;

}

/deep/ .ant-tabs-nav-container {
  margin-top: 20px;
}

/deep/ .ant-tabs-nav {
  border-bottom: #C6C4C4;
}


/deep/ .ant-calendar-picker-input.ant-input {
  width: 100%;
  height: 40px;
}

.btn {
  margin-top: 30px;
  width: 367px;
  height: 46px;
  background: linear-gradient(90deg, #28A1FF, #00C6F0);
  box-shadow: 0px 3px 7px 0px rgba(0, 148, 240, 0.28);
  border-radius: 8px;
  color: #FFFFFF;
  margin-left: 46px;
}

.money {
  width: 367px;
  margin-left: 47px;
  display: flex;
  margin-top: 30px;
}

.money-box {
  width: 50%;
  text-align: center;
}

.money-box span {
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: bolder;
  color: #666666;
}

.money-bottom {
  position: relative;
}

.bottom-words {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
}

.bottom-left {
  font-size: 15px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  margin: 0;
  color: #666666;
}

.bottom-right {
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
  margin: 0;
}

/deep/ .ant-input {
  border: none !important;
}

/deep/ .ant-input:focus {
  box-shadow: none !important;
}

/deep/ .ant-radio-group {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

/deep/ .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):first-child {
  border-color: #FF9239;
}

/deep/ .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
  color: #FF9239;
  border-color: #FF9239;
  box-shadow: -1px 0 0 0 #FF9239;
}
</style>